//运营管理 - 数据分析

import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Form , DatePicker, Row, Col, Table } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

const columns = [
  {
		title: '还款日期',
		align: 'center',
		dataIndex: 'repaymentTime',
    width: 100
  }, 
  {
		title: '订单数量',
		align: 'center',
		dataIndex: 'orderCount',
    width: 200,
    children: [
      {
        title: '应还数量',
        align: 'center',
        dataIndex: 'quantity',
        width: 80
      },
      {
        title: '首借数量',
        align: 'center',
        dataIndex: 'firstBorrowed',
        width: 80
      },
      {
        title: '复借数量',
        align: 'center',
        dataIndex: 'quantityBorrowed',
        width: 80
      },
      {
        title: '展期数量',
        align: 'center',
        dataIndex: 'exhibitionsNumber',
        width: 80
      },
    ]
  }, 
  {
		title: '逾期未还',
		align: 'center',
		dataIndex: 'overdue',
    width: 200,
    children: [
      {
        title: '首借数量',
        align: 'center',
        dataIndex: 'overFirstBorrowed',
        width: 80
      },
      {
        title: '复借数量',
        align: 'center',
        dataIndex: 'overQuantityBorrowed',
        width: 80
      },
      {
        title: '展期数量',
        align: 'center',
        dataIndex: 'overExhibitionsNumber',
        width: 80
      }
    ]
  },
  {
    title: '逾期率',
    align: 'center',
    dataIndex: 'OverdueRate',
    width: 800,
    children: [
      {
        title: '当日',
        align: 'center',
        dataIndex: 'sameDay',
        width: 160,
        children: [
          {
            title: '首借',
            align: 'center',
            dataIndex: 'sameFirstBorrowed',
            width: 50
          },
          {
            title: '复借',
            align: 'center',
            dataIndex: 'sameQuantityBorrowed',
            width: 50
          },
          {
            title: '展期',
            align: 'center',
            dataIndex: 'sameExhibitionsNumber',
            width: 50
          }
        ]
      },
      {
        title: '1日',
        align: 'center',
        dataIndex: 'dayOne',
        width: 160,
        children: [
          {
            title: '首借',
            align: 'center',
            dataIndex: 'oneFirstBorrowed',
            width: 50
          },
          {
            title: '复借',
            align: 'center',
            dataIndex: 'oneQuantityBorrowed',
            width: 50
          },
          {
            title: '展期',
            align: 'center',
            dataIndex: 'oneExhibitionsNumber',
            width: 50
          }
        ]
      },
      {
        title: '2日',
        align: 'center',
        dataIndex: 'dayTwo',
        width: 160,
        children: [
          {
            title: '首借',
            align: 'center',
            dataIndex: 'twoFirstBorrowed',
            width: 50
          },
          {
            title: '复借',
            align: 'center',
            dataIndex: 'twoQuantityBorrowed',
            width: 50
          },
          {
            title: '展期',
            align: 'center',
            dataIndex: 'twoExhibitionsNumber',
            width: 50
          }
        ]
      },
      {
        title: '3日',
        align: 'center',
        dataIndex: 'dayThree',
        width: 160,
        children: [
          {
            title: '首借',
            align: 'center',
            dataIndex: 'threeFirstBorrowed',
            width: 50
          },
          {
            title: '复借',
            align: 'center',
            dataIndex: 'threeQuantityBorrowed',
            width: 50
          },
          {
            title: '展期',
            align: 'center',
            dataIndex: 'threeExhibitionsNumber',
            width: 50
          }
        ]
      },
      {
        title: '总计',
        align: 'center',
        dataIndex: 'sumOfDay',
        width: 160,
        children: [
          {
            title: '首借',
            align: 'center',
            dataIndex: 'sumFirstBorrowed',
            width: 50
          },
          {
            title: '复借',
            align: 'center',
            dataIndex: 'sumQuantityBorrowed',
            width: 50
          },
          {
            title: '展期',
            align: 'center',
            dataIndex: 'sumExhibitionsNumber',
            width: 50
          }
        ]
      }
    ]
  }
];

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
		key: i,
    repaymentTime: '2018-12-07',
    quantity: 2,
    firstBorrowed: 0,
    quantityBorrowed: 0,
    exhibitionsNumber: 2,
    overFirstBorrowed: 0,
    overQuantityBorrowed: 0,
    overExhibitionsNumber: 0,
    sameFirstBorrowed: '0%',
    sameQuantityBorrowed: '0%',
    sameExhibitionsNumber: '0%',
    oneFirstBorrowed: '0%',
    oneQuantityBorrowed: '0%',
    oneExhibitionsNumber: '0%',
    twoFirstBorrowed: '0%',
    twoQuantityBorrowed: '0%',
    twoExhibitionsNumber: '0%',
    threeFirstBorrowed: '0%',
    threeQuantityBorrowed: '0%',
    threeExhibitionsNumber: '0%',
    sumFirstBorrowed: '0%',
    sumQuantityBorrowed: '0%',
    sumExhibitionsNumber: '0%'
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Analysis extends Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
	
	handleSearch = () => {
		console.log(1);
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">数据分析</span>
              <div className="btn">
                <Button icon="redo" size="small">刷新</Button>
                <Button icon="delete" size="small" onClick={this.handleDelete}>清空</Button>
                <Button icon="search" size="small" type="primary" onClick={this.handleSearch}>搜索</Button>
              </div>
            </div>
          </div>   
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={6}>
                  <FormItem>
                    {getFieldDecorator('range-picker', rangeConfig)(
                      <RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '400px' }} />
                    )}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered columns={columns} dataSource={data} />
          </div>
        </div>
      </LocaleProvider>   
		);
	}
}

const analysisForm = Form.create()(Analysis);

export default analysisForm;